<template>
  <!-- 商品分类导航 -->
  <div class="type-nav">
      <div class="container">
          <div class="sort-nav" @mouseleave='hideSort()'>
            <h2 class="all" @mouseenter='isShowNav=true'>全部商品分类</h2>
            <transition name="sort">
             	<div class="sort" v-show='isShowNav'>
                <!-- 鼠标移出时 清除activeId -->
	                <div class="all-sort-list2">
	                    <!-- 鼠标移入 给移入元素添加 active类名 -->
	                    <div class="item" 
                        v-for='cate1 in navList' 
                        :key='cate1.categoryId'
                        @click='goCataPage($event)'>
	                        <h3>
	                            <!-- 一级分类 -->
                              <a :data-category-name='cate1.categoryName' :data-category1-id='cate1.categoryId'>{{cate1.categoryName}}</a>
                              <!-- <a @click='goCataPage(cate1.categoryName)'>{{cate1.categoryName}}</a> -->
	                            <!-- <router-link :to="{path:'/search',query:{categoryName:cate1.categoryName}}">{{cate1.categoryName}}</router-link> -->
	                        </h3>
	                        <div class="item-list clearfix">
	                            <div class="subitem">
	                                <dl class="fore"  v-for='cate2 in cate1.categoryChild' :key='cate2.categoryId'>
	                                    <dt>
	                                        <!-- 二级分类 -->
                                          <a :data-category-name='cate2.categoryName' :data-category2-id='cate2.categoryId'>{{cate2.categoryName}}</a>
                                          <!-- <a @click='goCataPage(cate2.categoryName)'>{{cate2.categoryName}}</a> -->
	                                        <!-- <router-link :to="{path:'/search',query:{categoryName:cate2.categoryName}}">{{cate2.categoryName}}</router-link> -->
	                                    </dt>
	                                    <dd>
	                                        <em v-for='cate3 in cate2.categoryChild' :key='cate3.categoryId'>
	                                            <!-- 三级分类 -->
                                              <a :data-category-name='cate3.categoryName' :data-category3-id='cate3.categoryId'>{{cate3.categoryName}}</a>
	                                            <!-- <a @click='goCataPage(cate3.categoryName)'>{{cate3.categoryName}}</a> -->
	                                        </em>
	                                    </dd>
	                                </dl>
	                            </div>
	                        </div>
	                    </div>
	                </div>
            	</div>
            </transition>
          </div>
          <nav class="nav">
              <router-link to="/unPage">服装城</router-link>
              <router-link to="/unPage">美妆馆</router-link>
              <router-link to="/unPage">SAMShop超市</router-link>
              <router-link to="/unPage">全球购</router-link>
              <router-link to="/unPage">闪购</router-link>
              <router-link to="/unPage">团购</router-link>
              <router-link to="/unPage">有趣</router-link>
              <!-- // lodash 插件 节流函数 测试 -->
              <a href="###" @click='testThrottle()'>秒杀</a>
          </nav>
      </div>
  </div>
</template>

<script>
// 引入lodash 测试
// 按需引入
import { throttle } from 'lodash/function'
// 完整引入
import _ from 'lodash'
import { createNamespacedHelpers } from 'vuex';
const {mapState:homeMapState} = createNamespacedHelpers('home')

export default{
    computed:{
	    // 拿vuex的数据，渲染菜单数据
      ...homeMapState(['navList'])
    },
    data(){
      return{
        isShowNav:false,
      }
    },
    mounted(){
      this.isShowNav = this.$route.path=='/home'
    },
    methods:{
      // lodash 插件 节流函数 测试
      testThrottle:throttle(()=>{
        console.log('testThrottle')
      },10000),

      // 判断路由是否为首页
      hideSort(){
        if(this.$route.path=='/home') return;
        this.isShowNav = false
      },

      // 跳转事件进行事件委托，以提升性能
      goCataPage(e){
        // console.log(e.target.dataset)
        // 获取自定义属性
        const {categoryName,category1Id,category2Id,category3Id } = e.target.dataset
        // 判断自定义属性是否存在，存在则绑定事件,不存在就返回
        if(!categoryName) return;
        else { 
          this.$router.push({
            // 如果没有,undefined的值不会通过url 传递
            // 要将 params 一起传递啊，才能实现分类和搜索词一起搜索,不能用path
            name:'Search',
            query:{categoryName,category1Id,category2Id,category3Id},
            params:this.$route.params
          })
        }
      },      


    }
}
</script>

<style lang="scss" scoped>
.type-nav {
  border-bottom: 2px solid #e1251b;

  .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      position: relative;

      .all {
          width: 210px;
          height: 45px;
          background-color: #e1251b;
          line-height: 45px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
      }

      .nav {
          a {
              height: 45px;
              margin: 0 22px;
              line-height: 45px;
              font-size: 16px;
              color: #333;
          }
      }

      .sort {
          position: absolute;
          left: 0;
          top: 45px;
          width: 210px;

          //height: 461px;
          position: absolute;
          background: #fafafa;
          z-index: 999;

          .all-sort-list2 {
              .item {
                  &:hover {
                    background: #999;
                  }
                  &.active {
                    background: #d9d9d9;
                  }
                  h3 {
                      line-height: 30px;
                      font-size: 14px;
                      font-weight: 400;
                      overflow: hidden;
                      padding: 0 20px;
                      margin: 0;

                      a {
                          color: #333;
                      }
                  }
                  a {
                    cursor: pointer;
                  }

                  .item-list {
                      display: none;
                      position: absolute;
                      width: 734px;
                      min-height: 460px;
                      background: #f7f7f7;
                      left: 210px;
                      border: 1px solid #ddd;
                      top: 0;
                      z-index: 9999 !important;

                      .subitem {
                          float: left;
                          width: 650px;
                          padding: 0 4px 0 8px;

                          dl {
                              border-top: 1px solid #eee;
                              padding: 6px 0;
                              overflow: hidden;
                              zoom: 1;

                              &.fore {
                                  border-top: 0;
                              }

                              dt {
                                  float: left;
                                  width: 54px;
                                  line-height: 22px;
                                  text-align: right;
                                  padding: 3px 6px 0 0;
                                  font-weight: 700;
                              }

                              dd {
                                  float: left;
                                  width: 415px;
                                  padding: 3px 0 0;
                                  overflow: hidden;

                                  em {
                                      float: left;
                                      height: 14px;
                                      line-height: 14px;
                                      padding: 0 8px;
                                      margin-top: 5px;
                                      border-left: 1px solid #ccc;

                                      &:hover{
                                        background:#999;
                                      }
                                  }
                              }
                          }
                      }
                  }

                  &:hover {
                      .item-list {
                          display: block;
                      }
                  }
              }
          }
      }
      .sort-leave-active, .sort-enter-active {
        transition: all .3s ease;
      }
      .sort-leave-to, .sort-enter {
        opacity: 0;
      }

  }
}
</style>